<template>
	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
		<div class="layout-view-bg-white">
			<div id="left-panel" class="" style="height: 552px;">
				<div id="searchbox" class="clearfix">
					<div id="searchbox-container" style="width:340px;">
						<div id="sole-searchbox-content" class="searchbox-content">
							<input @click="searchBoxFocus" v-model="searchContent.address" id="sole-input" class="searchbox-content-common" type="text" name="word"
							autocomplete="off" maxlength="256" placeholder="搜地点">							
							<div class="input-clear" title="清空" style="display: block;" @click="closeSearchContent">
							</div>							
							<div v-if="false" class="searchbox-content-button right-button route-button loading-button"
							data-title="疏散路线" @click="clickGhLuxian">
							</div>
							<!--搜索提示从数据库查找start-->							
							<div v-if="isShowSearchSug" class="ui3-suggest-wrap" id="ui3-suggest-wrap" style="top: 40.9962px; z-index: 1000;display: block;">
								<div id="ui3-suggest-scroll" style="width: 368px;">
									<div @click="setSearchInput(sugItem)" class="ui3-suggest-item" v-for="sugItem in searchSugItems" :key="sugItem.address"><a>
										<i class="default" >{{sugItem.address}}</i></a></div> 
								</div>
							</div>
							<!--搜索提示从数据库查找end-->
							<!--搜索起终点提示从数据库查找start-->							
							<div v-if="isShowQizhongSug" class="ui3-suggest-wrap" id="ui3-suggest-wrap" style="top: 155.9962px; z-index: 1000;display: block;">
								<div id="ui3-suggest-scroll" style="width: 368px;">
									<div @click="setQizhongdianInput(sugItem)" class="ui3-suggest-item" v-for="sugItem in searchSugItems" :key="sugItem.address"><a><i class="default">{{sugItem.address}}</i></a></div> 
								</div>
							</div>
							<!--搜索起终点提示从数据库查找end-->
							
						</div>
<!--路线start-->						
					<div v-if="false" id="route-searchbox-content" class="searchbox-content route-searchbox-content" :class="curRouteIndex">
						<div class="route-header">
							<div class="searchbox-content-common route-tabs">
								<div class="tab-item bus-tab" data-index="bus" @click="changeRouteIndex(event)">
									<i></i>
									<span>大巴</span>
								</div>
								<div class="tab-item drive-tab" data-index="drive" @click="changeRouteIndex(event)">
									<i></i>
									<span>驾车</span>
								</div>
								<div class="tab-item walk-tab" data-index="walk" @click="changeRouteIndex(event)">
									<i></i>
									<span>步行</span>
								</div>
								<div class="tab-item bike-tab" data-index="bike" @click="changeRouteIndex(event)">
									<i></i>
									<span>骑行</span>
								</div>
								<div class="arrow-wrap">
								</div>
							</div>
							<div class="searchbox-content-button right-button cancel-button loading-button"
							data-title="关闭路线" data-tooltip="2" @click="{showLuxian=false;startGhLuxian.address='';endGhLuxian.address='';}">
							</div>
						</div>
						<div class="routebox">
							<div class="searchbox-content-common routebox-content">
								<div class="routebox-revert" title="切换起终点">
									<div class="routebox-revert-icon">
									</div>
								</div>
								<div class="routebox-inputs">
									<div class="routebox-input route-start">
										<div class="route-input-icon">
										</div>
										<input @click="startGhLuxianFocus" v-model="startGhLuxian.address" autocomplete="off" maxlength="256" placeholder="输入起点或在图区上选点" class="route-start-input"
										type="text">
										<div class="input-clear" title="清空" style="display: block;" @click="startGhLuxian.address=''">
										</div>
										<div class="route-input-add-icon">
										</div>
									</div>
									<div class="routebox-input route-end">
										<div class="route-input-icon">
										</div>
										<input @click="endGhLuxianFocus" v-model="endGhLuxian.address" autocomplete="off" maxlength="256" placeholder="输入终点" class="route-end-input"
										type="text">
										<div class="input-clear" title="清空" style="display: block;" @click="endGhLuxian.address=''">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
<!--路线end-->						
					</div>
					<button class="searchLeft" id="search-button" data-title="搜索" @click="searchAddr">
					</button>
					<div id="toast-wrapper">
						<div id="toast">
							<img class="info-tip-img" src="/static/images/transparent.gif" alt="">
							<span class="info-tip-text">
							</span>
						</div>
					</div>					
				</div>
				<ul id="cards-level0" class="cardlist">
				</ul>
				<ul id="cards-level1" class="cardlist">
				</ul>
				<ul id="cards-level2" class="cardlist">
				</ul>
			</div>
			
			<div id="app-right-top">
				<div id="user-center" class="ui3-user-center-wrap" style="visibility: visible;">
					<div class="avatar-abstract" style="background-image: url(&quot;/static/images/857a6c6863626470616e47cf.jpg&quot;);">
					</div>
					<div class="info-box clearfix" style="display: none;">
						<div class="arrow">
						</div>
					</div>
				</div>
				<div id="message-center" class="has-message">
					<div class="message-center-entrance">
					</div>
					<div id="message-panel" class="">
						<div class="close-btn-indexpage" title="关闭">
							×
						</div>
					</div>
				</div>
				<div id="tool-container" class="toolscontainer">
					<div class="ui3-control-wrap clearfixs" id="ui3_control_wrap">
						<!-- <div class="cityData ui3-springfestival-data-wrap" id="ui3_springfestival_data">        <span class="ui3-springfestival-data-link"></span>    </div>-->
						
						<div class="citychangeopt ui3-city-change-wrap" id="ui3_city_change">
							<span class="adjustpadding">
							</span>
							<span class=" flex items-center justify-center" style="display: flex;" id="weather" title="天气">
								<img alt="图标" class=" w-4 h-4 " style="padding:0px;margin:0px;" src="/favicon.ico">
							</span>
							<a map-on-click="selectCity"
							@click="isShowSelectItem=!isShowSelectItem" class="ui3-city-change-inner ui3-control-shadow">
								<span>{{pageType}}</span>
								<em></em>
							</a>

							<div v-if="isShowSelectItem" class="ui3-suggest-wrap" id="ui3-suggest-wrap" style="top: 34.9962px; z-index: 1000;display: block;">
								<div id="ui3-suggest-scroll" style="width: 101px;">
									<div @click="setSelectItem(selItem)" class="ui3-suggest-item" v-for="selItem in allSelectItems" :key="selItem"><a>
										<!-- <i class="default">{{selItem}}</i> -->
										<i class="el-icon-search " style="padding-left:5px;" ><span class=" ml-2">{{selItem}}</span></i>
										</a></div> 
								</div>
							</div>
						</div>
						
						<div class="left float-l">
							<b class="tool-gap"></b>
							<div class="trafficopt" map-on-click="traffic">
								<span id="traffic_control" class="last traffic"></span>
								<i>路况</i>
							</div>
							<b></b>
							<div class="boxopt" map-on-click="box" @click="{
								showToolsBox=!showToolsBox;
								isMarkActive=false;
								if (showLuxian){
								showLuxian=false;
								startGhLuxian.address='';
  								endGhLuxian.address='';
								}
								}">
								<span id="util_control" class="boxutils boxicon" :class="showToolsBox ? 'active':''"></span>
								<i class="boxtext" :class="showToolsBox ? 'active':''">工具箱</i>
								<em></em>
							</div>
<!--工具箱打开 part start-->							
							<div v-if="showToolsBox" class="detail-box" style="display: block;width:105px" >
								<ul id="boxul" class="boxinfo">
									<li class="map-measure" map-on-click="measure" @click="clickSubTools($event)">
										<span class="last measure"></span>
										<i>路线区域</i>
									</li>
									<li class="map-mark" map-on-click="mark" @click="clickSubTools($event)">
										<span class="last mark" :class="isMarkActive ? 'active':''"></span>
										<i :class="isMarkActive ? 'active':''">标记地点</i>
									</li>
									<!--
									<li class="map-share" map-on-click="share">
										<span class="last share"></span>
										<i>分享</i>
									</li>
									-->
								</ul>
							</div>
<!--工具箱打开part end-->
							
						</div>
					</div>
				</div>
			</div>
			<!--
			<div id="echartsMap" style="height: 100%" map-on-click="emap"  @click="onClickMap(event)" @dblclick="onDblClickMap(event)"></div>
			-->
			<div id="echartsMap" style="height: 100%"></div>			
			</div>
			<!--  -->						  
			  <el-dialog
			  ref="elsslxmapDialog"
		      :title="dialogStatus=='create' ? '创建' : '编辑'"
		      v-model="dialogFormVisible"
		      customClass="customWidth"		      
		      >
		      <el-form
		        ref="dataForm"
		        :rules="rules"
		        :model="tempArticleModel"
		        label-position="left"
		        label-width="60px"
		        style="width: 350px;"
		      >
		        <!--
		        <el-form-item
		          :label="t('message.layout.author')"
		          prop="type"
		        >
		          <el-select
		            v-model="tempArticleModel.type"
		            class="filter-item"
		            placeholder="请选择"
		          >
		            <el-option
		              v-for="item in calendarTypeOptions"
		              :key="item.key"
		              :label="item.displayName"
		              :value="item.key"
		            />
		          </el-select>
		        </el-form-item>
		        -->
		        <el-form-item
		          :label="t('message.layout.title')"
		          prop="title"
		        >
		          <el-input v-model="tempArticleModel.title" placeholder="名称为唯一标示,必须与已有不同" />
		        </el-form-item>
		        <el-row style="margin-bottom: 20px;">
		        <el-col :span='12'>
			        <el-form-item
			          label="联系"
			          prop="reviewer"
			        >
			          <el-input
			            v-model="tempArticleModel.reviewer"            
			            placeholder="填写"
			          />
			        </el-form-item>
			     </el-col>
			        
			     <el-col :span='12'>
			        <el-form-item
			          :label="t('message.layout.phone')"
			          prop="timestamp"
			        >
			          <el-input
			            v-model="tempArticleModel.timestamp"            
			            placeholder="填写"
			          />
			        </el-form-item>
			    </el-col>
		        </el-row>
		        
		        <el-row style="margin-bottom: 20px;">
			       <el-col :span='12'>
			        <el-form-item label="区域" prop="status">
			          <el-select
			            v-model="tempArticleModel.status"
			            class="filter-item"
			            placeholder="请选择"
			          >
			            <el-option
			              v-for="item in statusOptions"
			              :key="item"
			              :label="item"
			              :value="item"
			            />
			          </el-select>
			        </el-form-item>
			       </el-col>

			       <el-col :span='12'>
			        <el-form-item
			          :label=" t('message.layout.location')"
			          prop="pageviews"
			        >
			          <el-input v-model="tempArticleModel.pageviews" />
			        </el-form-item>
			       </el-col>
		        </el-row>
		        <!--
		        <el-form-item :label="t('message.layout.managementUnit')">
		          <el-select
		            v-model="tempArticleModel.author"
		            class="filter-item"
		            placeholder="请选择"
		          >
		            <el-option
		              v-for="item in importanceOptions"
		              :key="item"
		              :label="item"
		              :value="item"
		            />
		          </el-select>
		        </el-form-item>
		        -->
		        
		        <el-form-item label="备注" prop="fullContent">
		          <el-input
		            v-model="tempArticleModel.fullContent"
		            :autosize="{minRows: 2, maxRows: 4}"
		            type="textarea"
		            placeholder=" 信息"
		          />
		        </el-form-item>
		      </el-form>
		      
		      <div class="dialog-footer">
		        <el-button @click="dialogFormVisible = false">
		          {{ t("message.layout.cancel") }}
		        </el-button>
		        <el-button
		          type="primary"
		          @click="dialogStatus === 'create' ? createData() : updateData()"
		        >
		          {{ t("message.layout.confirm") }}
		        </el-button>
		        <el-button
		          type="primary"
		          @click="handleDelete()"
		        >
		          {{ t("message.layout.delete") }}
		        </el-button>		       
		      </div>
		    </el-dialog>
	</div>
</template>

<script lang="ts">
import { onUnmounted, toRefs, reactive, computed, onMounted, getCurrentInstance, watch, nextTick, ref, unref } from 'vue';
import * as echarts from 'echarts';
import 'echarts/extension/bmap/bmap';
import '/@/assets/baidumaptools.css'
import '/@/assets/baidupage.css'
import { useStore } from '/@/store/index';
import { echartsMapList, echartsMapData } from './mock';
import {  
  createArticle,
  deleteArticleByName,
  updateArticle,
  defaultArticleModel,
  ArticleType,
  getArticles
} from '/@/request/articles'
import { ElForm, ElMessage } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { cloneDeep } from 'lodash'
import { useRouter } from 'vue-router';
import Assert from '/@/utils/shf/Assert';

export default {
	name: 'sslxMap',
	components: {
	},
	setup() {
		const { t } = useI18n();
		const store = useStore();
		const { proxy } = getCurrentInstance();
		const router = useRouter();
		
		const dataForm = ref(ElForm);
		const state = reactive({
			uptDelContext:{},
			isShowSelectItem:false,
			allSelectItems:['集结点','疏散路线','疏散地域','隐蔽地域','警报点'],
			dialogStatus:'',
			rules: {		        
		        title: [
		          { required: true, message: 'title is required', trigger: 'blur' }
		        ],
		        status: [
		          { required: true, message: 'area is required', trigger: 'change' }
		        ],
		      },
		    statusOptions: ['市人防', '市防疫', '区人防'],
		    tempArticleModel: defaultArticleModel,
			dialogFormVisible: false,
			pageType:proxy.$route.query.type,
			pageName:proxy.$route.query.name,
			echartsMapList,
			echartsMapData,	
			curRouteIndex:'bus',
			showLuxian:false,
			showToolsBox:false,
			isMarkActive:false,
			isShouhuiActive:false,
			searchContent:{
				address:'',
				longitude:0.0,
				latitude:0.0,
			},
			isSetsearchContent:false,
			isSetqizhongContent:false,
			startGhLuxian:{
				address:'',
				longitude:0.0,
				latitude:0.0,
			},
			endGhLuxian:{
				address:'',
				longitude:0.0,
				latitude:0.0,
			},
			bmap:{},
			searchSugItems:[],
			isShowSearchSug:false,
			isShowQizhongSug:false,
			isStartLuxianFocus:false,
			isEndLuxianFocus:false,
			pagedata:{
  			currentPage: 1,
        	pageCount: 1000,
  			},
  			nullSugItem:{
			  address: '警告!!无此POI数据',
			  longitude: 0.0,
			  latitude: 0.0,
			},
  			curSearchPoint:{},
  			curSearchMarker:{},

  			startGhLuxianPoint:{},
  			endGhLuxianPoint:{},
  			ghLuxianPolyline:{},
  			bmapPoints:[],
  			bmapOverlays:[],  			
  			getTblData:{},
  			
/////////////////集结点.etc//////////////  			
  			jijieDian:[],
			baozhangDian:[],
			
			shusanLuxianData:[],
			luxianDian:[],
			currentLxDian:[],
			
			shusandiyuDian:[],
			currentSsdyDian:[],
			shusanDiyuData:[],
			
			yinbidiyuDian:[],
			currentYbdyDian:[],
			yinbiDiyuData:[],			
			
			isMouseDown:false,
			myChart:{},
		});
		
		const dftSeriesLinesData={
			name: 'tempLinesDataNameLhc',
			coords:[],		
		};
		
		const dftSeriesScatterDataName='tempScatterDataNameLhc';
/*
		watch((event)=>event.currentTarget.getAttribute('map-on-click'),(val)=>{
		});
*/		
		watch(()=>state.searchContent.address,async(val)=>{	
			if (state.isSetsearchContent){
				state.isSetsearchContent=false;
			}
			else 
			{				
				if (val.length>1){
					state.pagedata.address=val;
					await getArticles(state.pagedata,ArticleType.MAPPOI).then(res => {
					
					state.searchSugItems=[];
					for (let i=0;res.data[i];i++){
						state.searchSugItems.push(res.data[i]);
					}
					if (state.searchSugItems.length==0){
						state.searchSugItems.push(state.nullSugItem);
					}
		         	});
		         	
					state.isShowSearchSug=true;					
				}
				else{
					state.isShowSearchSug=false
				}				
			}
		});

		watch(()=>state.startGhLuxian.address,async(val)=>{			
			if (state.isSetqizhongContent){
				state.isSetqizhongContent=false;				
			}
			else 
			{
				if (val.length>1){
					state.pagedata.address=val;
					await getArticles(state.pagedata,ArticleType.MAPPOI).then(res => {
					
					state.searchSugItems=[];
					for (let i=0;res.data[i];i++){
						state.searchSugItems.push(res.data[i]);
					}
					if (state.searchSugItems.length==0){
						state.searchSugItems.push(state.nullSugItem);
					}
		         	});
					state.isShowQizhongSug=true;					
				}
				else{
					state.isShowQizhongSug=false;
					state.startGhLuxian.longitude=0.0;
					state.startGhLuxian.latitude=0.0;
					if (state.ghLuxianPolyline)	{					
						state.bmap.removeOverlay(state.ghLuxianPolyline);
						delete state.ghLuxianPolyline;
					}
					
				}				
			}
		});

		watch(()=>state.endGhLuxian.address,async(val)=>{			
			if (state.isSetqizhongContent){
				state.isSetqizhongContent=false;
				//start search
			}
			else 
			{
				if (val.length>1){
					state.pagedata.address=val;
					await getArticles(state.pagedata,ArticleType.MAPPOI).then(res => {
					
					state.searchSugItems=[];
					for (let i=0;res.data[i];i++){
						state.searchSugItems.push(res.data[i]);
					}
					if (state.searchSugItems.length==0){
						state.searchSugItems.push(state.nullSugItem);
					}
		         	});
					state.isShowQizhongSug=true;					
				}
				else{
					state.isShowQizhongSug=false;					
					state.endGhLuxian.longitude=0.0;
					state.endGhLuxian.latitude=0.0;
					
					if (state.ghLuxianPolyline)	{					
						state.bmap.removeOverlay(state.ghLuxianPolyline);
						delete state.ghLuxianPolyline;
					}
				}				
			}
		});

		watch (()=>state.dialogFormVisible,(val)=>{
			if (!val){
				if (state.dialogStatus == 'create'){
					let delDian=[];
					let delData=[];
					
					switch(state.pageType){
					case '集结点':{
						for (let i=0;i<state.jijieDian.length;i++){
							let ele=state.jijieDian[i];
							if (ele.name==''){
								delDian.push(i);
								break;
							 }
						}
						let j=0;
						delDian.forEach((ele)=>{							
							state.jijieDian.splice(ele-j,1);
							j++;
						});
						if (j){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: state.pageType,
							        data: state.jijieDian
							      }
							    ]
							  });
						}						
					}
					break;
					case '警报点':{
						for (let i=0;i<state.baozhangDian.length;i++){
							let ele=state.baozhangDian[i];
							if (ele.name==''){
								delDian.push(i);
								break;
							}
						}
						let j=0;
						delDian.forEach((ele)=>{							
							state.baozhangDian.splice(ele-j,1);
							j++;
						});
						if (j){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: state.pageType,
							        data: state.baozhangDian
							      }
							    ]
							  });
						}						
					}
					break;
					case '疏散路线':{
					//路线点
						delDian=[];
						for (let i=0;i<state.luxianDian.length;i++){
							let ele=state.luxianDian[i];
							if (ele.name==dftSeriesLinesData.name){
								delDian.push(i);
							}
						}
						let j=0;
						delDian.forEach((ele)=>{							
							state.luxianDian.splice(ele-j,1);
							j++;
						});
						if (j){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: '路线点',
							        data: state.luxianDian
							      }
							    ]
							  });
						}
					//路线
						delDian=[];
						for (let i=0;i<state.shusanLuxianData.length;i++){
							let ele=state.shusanLuxianData[i];
							if (ele.name==dftSeriesLinesData.name){
								delDian.push(i);
								break;
							}
						}
						let k=0;
						delDian.forEach((ele)=>{							
							state.shusanLuxianData.splice(ele-k,1);
							k++;
						});
						if (k){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: state.pageType,
							        data: state.shusanLuxianData
							      }
							    ]
							  });
						}
					}
					break;
					case '疏散地域':{
					//地域点
						delDian=[];
						for (let i=0;i<state.shusandiyuDian.length;i++){
							let ele=state.shusandiyuDian[i];
							if (ele.name==dftSeriesLinesData.name){
								delDian.push(i);
							}
						}
						let j=0;
						delDian.forEach((ele)=>{							
							state.shusandiyuDian.splice(ele-j,1);
							j++;
						});
						if (j){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: '疏散地域点',
							        data: state.shusandiyuDian
							      }
							    ]
							  });
						}
					//地域
						delDian=[];
						for (let i=0;i<state.shusanDiyuData.length;i++){
							let ele=state.shusanDiyuData[i];
							if (ele.name==dftSeriesLinesData.name){
								delDian.push(i);
								break;
							}
						}
						let k=0;
						delDian.forEach((ele)=>{							
							state.shusanDiyuData.splice(ele-k,1);
							k++;
						});
						if (k){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: state.pageType,
							        data: state.shusanDiyuData
							      }
							    ]
							  });
						}
					}
					break;
					case '隐蔽地域':{
					//地域点
						delDian=[];
						for (let i=0;i<state.yinbidiyuDian.length;i++){
							let ele=state.yinbidiyuDian[i];
							if (ele.name==dftSeriesLinesData.name){
								delDian.push(i);
							}
						}
						let j=0;
						delDian.forEach((ele)=>{							
							state.yinbidiyuDian.splice(ele-j,1);
							j++;
						});
						if (j){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: '隐蔽地域点',
							        data: state.yinbidiyuDian
							      }
							    ]
							  });
						}
					//地域
						delDian=[];
						for (let i=0;i<state.yinbiDiyuData.length;i++){
							let ele=state.yinbiDiyuData[i];
							if (ele.name==dftSeriesLinesData.name){
								delDian.push(i);
								break;
							}
						}
						let k=0;
						delDian.forEach((ele)=>{							
							state.yinbiDiyuData.splice(ele-k,1);
							k++;
						});
						if (k){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: state.pageType,
							        data: state.yinbiDiyuData
							      }
							    ]
							  });
						}
					}
					break;
					
					}
				}
			}			
		});
		
		

	    const setSelectItem = (selItem)=>{
	    	state.isShowSelectItem=false;
	    	let str='/menu/menu1/menu12/menu121';
	    	
	    	switch (selItem){
	    	case '集结点':{
	    		str='/menu/menu1/menu12/menu121';
	    	}
	    	break;
	    	case '疏散路线':{
	    		str='/menu/menu1/menu12/menu122';
	    	}
	    	break;
	    	case '疏散地域':{
	    		str='/menu/menu1/menu12/menu123';
	    	}
	    	break;
	    	case '隐蔽地域':{
	    		str='/menu/menu1/menu12/menu124';
	    	}
	    	break;
	    	case '警报点':{
	    		str='/menu/menu1/menu12/menu125';
	    	}
	    	break;
	    	case '经济目标':{
	    		str='/menu/menu1/menu12/menu126';
	    	}
	    	break;
	    	}
	    	
	    	router.push({
					path: str,
					query: { type: selItem,name:''},					
			});
	    };

	    const searchBoxFocus = ()=>{
	    	if (state.showLuxian) state.showLuxian=false;
	    	if (state.showToolsBox) state.showToolsBox=false;
	    	
	    };

	    const startGhLuxianFocus = ()=>{
	    	state.isStartLuxianFocus=true;
			state.isEndLuxianFocus=false;
	    };

	    const endGhLuxianFocus = ()=>{
	    	state.isStartLuxianFocus=false;
			state.isEndLuxianFocus=true;
	    };

	    const setSearchInput = (sugItem)=>{	    	
	    	state.isShowSearchSug=false;

	    	if (sugItem.longitude!=0.0){
	    		state.isSetsearchContent=true;
		    	state.searchContent=sugItem;	    	
		    			    	
				state.curSearchPoint.lng=sugItem.longitude;
				state.curSearchPoint.lat=sugItem.latitude;
				state.bmap.centerAndZoom(state.curSearchPoint, 19);
				
				// 创建标注
				state.curSearchMarker.point=state.curSearchPoint;
				state.bmap.addOverlay(state.curSearchMarker);
			}
	    };

	    const closeSearchContent = ()=>{
	    	state.searchContent.address='';
	    	state.searchContent.longitude=state.searchContent.latitude=0.0;
	    	state.bmap.removeOverlay(state.curSearchMarker);
	    };

	    const setQizhongdianInput = (sugItem)=>{
	    	state.isSetqizhongContent=true;
	    	state.isShowQizhongSug=false;
	    	
	    	if (state.isStartLuxianFocus){
		    	if (sugItem.longitude!=0.0){
			    	state.startGhLuxian=sugItem;	    	
			    	//start search		    	
					if (state.endGhLuxian.longitude!=0.0){
						state.startGhLuxianPoint.lng=sugItem.longitude;
						state.startGhLuxianPoint.lat=sugItem.latitude;					
			  			state.endGhLuxianPoint.lng=state.endGhLuxian.longitude;
			  			state.endGhLuxianPoint.lat=state.endGhLuxian.latitude;
			  			
			  			var polyline =  new BMap.Polyline([
						  state.startGhLuxianPoint,
						  state.endGhLuxianPoint
						], {strokeColor: "red", strokeWeight: 6, strokeOpacity: 0.5});
						state.ghLuxianPolyline=polyline;
						state.bmap.addOverlay(polyline); 
						/*
			  			state.ghLuxianPolyline=BMap.Polyline([
			  			state.startGhLuxianPoint,state.endGhLuxianPoint],
			  			{strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5});
			  			state.bmap.addOverlay(state.ghLuxianPolyline);*/			  			
					}
				}
	    	}
	    	else if (state.isEndLuxianFocus){
	    		if (sugItem.longitude!=0.0){
			    	state.endGhLuxian=sugItem;	    	
			    	//start search		    	
					if (state.startGhLuxian.longitude!=0.0){
						state.startGhLuxianPoint.lng=state.startGhLuxian.longitude;
						state.startGhLuxianPoint.lat=state.startGhLuxian.latitude;						
			  			state.endGhLuxianPoint.lng=sugItem.longitude;
			  			state.endGhLuxianPoint.lat=sugItem.latitude;
			  			
			  			var polyline =  new BMap.Polyline([
						  state.startGhLuxianPoint,
						  state.endGhLuxianPoint
						], {strokeColor: "red", strokeWeight: 6, strokeOpacity: 0.5});
						state.ghLuxianPolyline=polyline;
						state.bmap.addOverlay(polyline);
						
			  			/*
			  			state.ghLuxianPolyline=BMap.Polyline([
			  			state.startGhLuxianPoint,state.endGhLuxianPoint],
			  			{strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5});
			  			state.bmap.addOverlay(state.ghLuxianPolyline);*/ 			  			
					}
				}
	    	}

	    	//start to 
	    };
	    
		const clickGhLuxian = ()=>{
			state.showLuxian=!state.showLuxian;
			
			if (state.showLuxian){
				state.endGhLuxian.address='';
				state.startGhLuxian.address='';
				state.isShowSearchSug=false;
				if (state.showToolsBox){
					state.showToolsBox=false;
					state.isMarkActive=false;
					state.isShouhuiActive=false;
				}
			}
			else{
				state.startGhLuxian.address=state.endGhLuxian.address='';
			}
			
			//start luxian
		};
		
		const changeRouteIndex = (event)=>{			
			state.curRouteIndex=event.currentTarget.getAttribute('data-index');
		};

		const searchAddr = ()=>{
		};
		
		const clickSubTools = (event)=>{
			let curTool=event.currentTarget.getAttribute('map-on-click');
			if (curTool=='measure'){
				state.showToolsBox=false;
				//鼠标样式，想结束则双击，start 手绘
				state.isShouhuiActive=true;
				state.isMarkActive=false;
				state.bmap.disableDoubleClickZoom();
			}
			else if (curTool=='mark'){
				state.isMarkActive=!state.isMarkActive;
				//鼠标样式，start 标记，标记一次，active=false，需要重新点击标记
				if (state.isMarkActive){
					if (state.isShouhuiActive){
						state.isShouhuiActive=false;
						state.bmap.enableDoubleClickZoom();
						
					}
				}				
			}
		};

		const loadTypeName = async()=>{
			state.pagedata.importance=state.pageType;
			//if (state.pageName!='') state.pagedata.title=state.pageName;
			for (let i=0;i<state.allSelectItems.length;i++){
				if (state.allSelectItems[i]==state.pageType){
					state.allSelectItems.splice(i,1);
					break;
				}
			}
			state.getTblData={};
			await getArticles(state.pagedata,ArticleType.SSYS).then((res)=>{
				state.getTblData=res;
			});
			
			let point=new BMap.Point(window['gLongitudeVal'], window['gLatitudeVal']);
			if (state.getTblData.total>0){
				switch(state.pageType){
				case '集结点':{	
					state.getTblData.data.forEach(ele=>{
						if (ele.title==state.pageName){
							point.lng=ele.sourceURL;
							point.lat=ele.imageURL;
						}
		    			state.jijieDian.push({
			    			name:ele.title,
			    			value:[ele.sourceURL,ele.imageURL],
		    			});
		    			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: state.pageType,
						        data: state.jijieDian
						      }
						    ]
						  });
		    		});		
				}
				break;
				
				case '疏散路线':{
					let nameArr=[];
					//路线点
					state.getTblData.data.forEach(ele=>{
						if (nameArr.indexOf(ele.title)==-1){
							nameArr.push(ele.title);
							state.luxianDian.push({
				    			name:ele.title,
				    			value:[ele.sourceURL,ele.imageURL,undefined],
				    			label:{show:true},
			    			});
						}
						else{
							state.luxianDian.push({
				    			name:ele.title,
				    			value:[ele.sourceURL,ele.imageURL,undefined],
		    				});
						}
						if ((state.pageName=='')||(ele.title==state.pageName)){
							point.lng=ele.sourceURL;
							point.lat=ele.imageURL;
						}
		    			
		    			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '路线点',
						        data: state.luxianDian
						      }
						    ]
						  });
		    		});	
					//路线
					let cnt=0;
					nameArr.forEach(nameEle=>{
						let j=0,idx=0;
						state.getTblData.data.forEach(ele=>{
							if (nameEle==ele.title){
								if(!j){
									idx=state.shusanLuxianData.push(
									{
										name:nameEle,
										coords:[[ele.sourceURL,ele.imageURL]],
									})-1;
								}
								else{
									state.shusanLuxianData[idx].coords.push([ele.sourceURL,ele.imageURL]);
								}
								j++;
							}
						});
						cnt+=j;						
					});

		    		if (cnt){
		    			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: state.pageType,
						        data: state.shusanLuxianData
						      }
						    ]
						  });
		    		}
				}
				break;
				
				case '疏散地域':{
					let nameArr=[];
					let cnt=0;
					//疏散地域点
					state.getTblData.data.forEach(ele=>{
						if (nameArr.indexOf(ele.title)==-1){
							nameArr.push(ele.title);
							state.shusandiyuDian.push({
				    			name:ele.title,
				    			value:[ele.sourceURL,ele.imageURL],
		    				});
		    				cnt++;
						}
						if (ele.title==state.pageName){
							point.lng=ele.sourceURL;
							point.lat=ele.imageURL;
						}		    			
		    		});
		    		if (cnt){
			    		state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '疏散地域点',
						        data: state.shusandiyuDian
						      }
						    ]
						 });
					 }
					 
					//疏散地域
					cnt=0;
					nameArr.forEach(nameEle=>{
						let j=0,idx=0;
						let startp=[];
						let endp=[];
						state.getTblData.data.forEach(ele=>{
							if (nameEle==ele.title){
								if(!j){
									startp=[ele.sourceURL,ele.imageURL];
									idx=state.shusanDiyuData.push(
									{
										name:nameEle,
										coords:[startp],
									})-1;
								}
								else{
									endp=[ele.sourceURL,ele.imageURL];
								}
								j++;
							}													
						});
						if (startp.length>0 && endp.length>0){
							state.shusanDiyuData[idx].coords.push(
							[endp[0],startp[1]],
							endp,
							[startp[0],endp[1]],
							startp);
						}
						cnt+=j;						
					});

		    		if (cnt){
		    			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: state.pageType,
						        data: state.shusanDiyuData
						      }
						    ]
						  });
		    		}
				}
				break;
				
				case '隐蔽地域':{
					let nameArr=[];
					let cnt=0;
					//疏散地域点
					state.getTblData.data.forEach(ele=>{
						if (nameArr.indexOf(ele.title)==-1){
							nameArr.push(ele.title);
							state.yinbidiyuDian.push({
				    			name:ele.title,
				    			value:[ele.sourceURL,ele.imageURL],
		    				});
		    				cnt++;
						}
						if (ele.title==state.pageName){
							point.lng=ele.sourceURL;
							point.lat=ele.imageURL;
						}		    			
		    		});
		    		if (cnt){
			    		state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '隐蔽地域点',
						        data: state.yinbidiyuDian
						      }
						    ]
						 });
					 }
					 
					//疏散地域
					cnt=0;
					nameArr.forEach(nameEle=>{
						let j=0,idx=0;
						let startp=[];
						let endp=[];
						state.getTblData.data.forEach(ele=>{
							if (nameEle==ele.title){
								if(!j){
									startp=[ele.sourceURL,ele.imageURL];
									idx=state.yinbiDiyuData.push(
									{
										name:nameEle,
										coords:[startp],
									})-1;
								}
								else{
									endp=[ele.sourceURL,ele.imageURL];
								}
								j++;
							}													
						});
						if (startp.length>0 && endp.length>0){
							state.yinbiDiyuData[idx].coords.push(
							[endp[0],startp[1]],
							endp,
							[startp[0],endp[1]],
							startp);
						}
						cnt+=j;						
					});

		    		if (cnt){
		    			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: state.pageType,
						        data: state.yinbiDiyuData
						      }
						    ]
						  });
		    		}
				}
				break;
				
				case '警报点':{	
					state.getTblData.data.forEach(ele=>{
						if (ele.title==state.pageName){
							point.lng=ele.sourceURL;
							point.lat=ele.imageURL;
						}
		    			state.baozhangDian.push({
			    			name:ele.title,
			    			value:[ele.sourceURL,ele.imageURL],
		    			});
		    			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: state.pageType,
						        data: state.baozhangDian
						      }
						    ]
						  });
		    		});		
				}
				break;
				
				default:{
				}
				break;
				}
			}
			state.bmap.centerAndZoom(point, 19);
			
		};

		const resetTempArticleModel = ()=> {
        	state.tempArticleModel = cloneDeep(defaultArticleModel);
        	state.tempArticleModel.importance=state.pageType;
        	state.dialogStatus='create';
        	/*
        	nextTick(() => {
	          (dataForm.value as typeof ElForm).clearValidate();
	        });
	        */
      	};
      	
		const editDialogShowByLoc = (offsetx,offsety)=>{
			let el = proxy.$refs.elsslxmapDialog;
			if (el){
			let locx,locy;
				if (offsetx>1120) locx=1170;
				else locx=offsetx+50;
				el.style.left = locx + "px";		
							
				if (offsety>300) locy=offsety-300;
				else locy=offsety+70;
				el.style.top = locy + "px";
				
				ElMessage.success(offsetx+','+offsety);    		
	    		state.dialogFormVisible=true;
    		}
		};

		const createData = async()=>{
            //const form = unref(dataForm);
            let ArticleModel=state.tempArticleModel;
            let ret=0;
            let upt=0;
            let idx=0;
            if (ArticleModel.title.length>0 && ArticleModel.status.length>0){            	
            	if (state.pageType== '集结点'){
            		ret=0;
            		upt=0;
            		idx=0;
            		for (let i=0;i<state.jijieDian.length;i++){
            			let ele=state.jijieDian[i];            		
            			if (ele.name==''){
            				ArticleModel.sourceURL=ele.value[0];
            				ArticleModel.imageURL=ele.value[1];
            				ret++;
            				idx=i;
            				break;
            			}            		
            		}
            		if (ret){
            			await createArticle(ArticleModel,ArticleType.SSYS).then(async() => {
					        ElMessage.success('添加成功')
					        state.dialogFormVisible = false
					        state.dialogStatus='success';					        
					        state.jijieDian[idx].name=ArticleModel.title;
					        upt++;
					      }).catch(err => {
					      ElMessage.warning('添加错误');
					     });

					     if (upt){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: state.pageType,
							        data: state.jijieDian
							      }
							    ]
							  });
						}	
            		}
            	}
				else if (state.pageType=='警报点'){
            		ret=0;
            		upt=0;
            		idx=0;
            		for (let i=0;i<state.baozhangDian.length;i++){
            			let ele=state.baozhangDian[i];            		
            			if (ele.name==''){
            				ArticleModel.sourceURL=ele.value[0];
            				ArticleModel.imageURL=ele.value[1];
            				ret++;
            				idx=i;
            				break;
            			}            		
            		}
            		if (ret){
            			await createArticle(ArticleModel,ArticleType.SSYS).then(async() => {
					        ElMessage.success('添加成功')
					        state.dialogFormVisible = false
					        state.dialogStatus='success';					        
					        state.baozhangDian[idx].name=ArticleModel.title;
					        upt++;
					      }).catch(err => {
					      ElMessage.warning('添加错误');
					     });

					     if (upt){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: state.pageType,
							        data: state.baozhangDian
							      }
							    ]
							  });
						}	
            		}
            	}
            	else if (state.pageType=='疏散路线'){
            		ret=0;
            		upt=0;
            		idx=0;
					let createCount = 0;
            		for (let i=0;i<state.luxianDian.length;i++){
            			let ele=state.luxianDian[i];            		
            			if (ele.name==dftSeriesLinesData.name){
            				ArticleModel.sourceURL=ele.value[0];
            				ArticleModel.imageURL=ele.value[1];
            				let res = await createArticle(ArticleModel,ArticleType.SSYS,createCount==0?true:false);
						    if(!res)
							{
								state.dialogFormVisible = false
						        state.dialogStatus='success';					        
						        state.luxianDian[i].name=ArticleModel.title;						        
						        upt++;
								createCount++; 
								continue;
							}
							Assert.isFalse(true,res+"");
							return;
            			}            		
            		}

				     if (upt){
				     	ElMessage.success('添加成功');
						state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '路线点',
						        data: state.luxianDian
						      }
						    ]
						  });

						  ret=0;
						  for (let i=0;i<state.shusanLuxianData.length;i++){
						  		let ele=state.shusanLuxianData[i];
						  		if (ele.name==dftSeriesLinesData.name){
						  			state.shusanLuxianData[i].name=ArticleModel.title;
						  			ret++;
						  			break;
						  		}
						  }
						  if (ret){
							  state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: state.pageType,
							        data: state.shusanLuxianData
							      }
							    ]
							  });
						  }
					}
					else ElMessage.warning('添加错误');
            		
            	}
            	else if (state.pageType=='疏散地域'){
            		ret=0;
            		upt=0;
            		idx=0;
            		for (let i=0;i<state.shusanDiyuData.length;i++){
            			let ele=state.shusanDiyuData[i];            		
            			if (ele.name==dftSeriesLinesData.name){
            			//ele.coords
            				for (let j=0;j<4;j+=2)
            				{
            					let parr=ele.coords[j];
	            				ArticleModel.sourceURL=parr[0];
	            				ArticleModel.imageURL=parr[1];
	            				await createArticle(ArticleModel,ArticleType.SSYS).then(async() => {
							        //ElMessage.success('添加成功')
							        state.dialogFormVisible = false
							        state.dialogStatus='success';					        
							        state.shusanDiyuData[i].name=ArticleModel.title;
							        upt++;
							      }).catch(err => {
							      //ElMessage.warning('添加错误');
							     });
						     }
						     break;
            			}            		
            		}

				     if (upt){
				     	ElMessage.success('添加成功')
				     	state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: state.pageType,
						        data: state.shusanDiyuData
						      }
						    ]
						  });
						ret=0;
				     	for (let i=0;i<state.shusandiyuDian.length;i++){
					  		let ele=state.shusandiyuDian[i];
					  		if (ele.name==dftSeriesLinesData.name){
					  			state.shusandiyuDian[i].name=ArticleModel.title;
					  			ret++;
					  			break;
					  		}
						  }
						  if (ret){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: '疏散地域点',
							        data: state.shusandiyuDian
							      }
							    ]
							  });
						  }
					}
					else ElMessage.warning('添加错误');
            		
            	}
            	else if (state.pageType=='隐蔽地域'){
            		ret=0;
            		upt=0;
            		idx=0;
            		for (let i=0;i<state.yinbiDiyuData.length;i++){
            			let ele=state.yinbiDiyuData[i];            		
            			if (ele.name==dftSeriesLinesData.name){
            			//ele.coords
            				for (let j=0;j<4;j+=2)
            				{
            					let parr=ele.coords[j];
	            				ArticleModel.sourceURL=parr[0];
	            				ArticleModel.imageURL=parr[1];
	            				await createArticle(ArticleModel,ArticleType.SSYS).then(async() => {
							        //ElMessage.success('添加成功')
							        state.dialogFormVisible = false
							        state.dialogStatus='success';					        
							        state.yinbiDiyuData[i].name=ArticleModel.title;
							        upt++;
							      }).catch(err => {
							      //ElMessage.warning('添加错误');
							     });
						     }
						     break;
            			}            		
            		}

				     if (upt){
				     	ElMessage.success('添加成功')
				     	state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: state.pageType,
						        data: state.yinbiDiyuData
						      }
						    ]
						  });
						ret=0;
				     	for (let i=0;i<state.yinbidiyuDian.length;i++){
					  		let ele=state.yinbidiyuDian[i];
					  		if (ele.name==dftSeriesLinesData.name){
					  			state.yinbidiyuDian[i].name=ArticleModel.title;
					  			ret++;
					  			break;
					  		}
						  }
						  if (ret){
							state.myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: '隐蔽地域点',
							        data: state.yinbidiyuDian
							      }
							    ]
							  });
						  }
					}
					else ElMessage.warning('添加错误');
            		
            	}
            	await getArticles(state.pagedata,ArticleType.SSYS).then((res)=>{
					state.getTblData=res;
				});
            }
            else ElMessage.error('请填写必填参数');
            
	        /*form.validate(async(valid: any) => {
	          if (valid) {
	          	
	            const ArticleModel = dataMap.tempArticleModel
	            //ArticleModel.id = Math.round(Math.random() * 100) + 1024 // mock a id
	            //ArticleModel.author = 'RCYJ_Scy'
	            const addData=await createArticle(ArticleModel,ArticleType.ZBWZ).then(async() => {
			        ElMessage.success('添加成功')
			        dataMap.dialogFormVisible = false
			        const data = await getArticles(dataMap.listQuery,ArticleType.ZBWZ)
			        //const data=zhihuiJigouJson        
			        dataMap.list = data?.data ?? []
			        dataMap.total = data?.total ?? 0
			      }).catch(err => {
			      ElMessage.warning('添加错误')
			     });
	          }
	        });*/
        };

        const compObject = (a,b)=>{
        
          //取对象a和b的属性名
	      let aProps = Object.getOwnPropertyNames(a);
	      let bProps = Object.getOwnPropertyNames(b);
	      //判断属性名的length是否一致
	      if (aProps.length != bProps.length) {
	          return false;
	      }
	      //循环取出属性名，再判断属性值是否一致
	      for (let i = 0; i < aProps.length; i++) {
	        let propName = aProps[i];
	        if (a[propName] !== b[propName]) {
	            return false;
	        }
	      }
	      return true;
        }; 
        
        const updateData = async()=>{
			let e=state.uptDelContext;
			let idxArr=[];
			let equal=false;
			let oncecomp=false;
			let uptecharts=false;
			let i=0;
			let ret=true;
			for (i=0;i<state.getTblData.data.length;i++){
    			let ele=state.getTblData.data[i];
    			if (ele.title==e.name){
    				state.tempArticleModel.id=ele.id;
    				if (!oncecomp){
    					oncecomp=true;
    					equal=compObject(state.tempArticleModel,ele);    					
    				}
    				if (!equal){
    					if (state.tempArticleModel.title!=ele.title) uptecharts=true;
    					state.tempArticleModel.sourceURL='';
    					state.tempArticleModel.imageURL='';
						const res = await updateArticle(state.tempArticleModel,ArticleType.SSYS);
						if(res)
                        {
							 Assert.isFalse(true,res+"");
							 return;
						}
    					// await updateArticle(state.tempArticleModel,ArticleType.SSYS).then(async()=>{
			        	// //ElMessage.success('更新成功')				        	
			            // }).catch(err => {
					    //   //ElMessage.warning('更新失败')
					    //   ret=false;
					    // });
    				}
    			}  		
    		}
    		state.dialogFormVisible = false
    		if (!ret){
    			ElMessage.warning('更新失败')
    			return;
    		}
    		
    		ElMessage.success('更新成功');
    		await getArticles(state.pagedata,ArticleType.SSYS).then((res)=>{
				state.getTblData=res;
			});
			
    		if (!uptecharts) return;
    		
    		
			switch(e.seriesName){
	    		case '集结点':{
	    			ret=false;
	    			for (let i=0;i<state.jijieDian.length;i++){
            			let ele=state.jijieDian[i];            		
            			if (ele.name==e.name){
            				ele.name=state.tempArticleModel.title;
            				ret=true;
            				break;
            			}            		
            		}
            		if (ret){
            			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: e.seriesName,
						        data: state.jijieDian
						      }
						    ]
						  });
            		}	    			
	    		}
	    		break;
	    		
	    		case '警报点':{
	    			ret=false;
	    			for (let i=0;i<state.baozhangDian.length;i++){
            			let ele=state.baozhangDian[i];            		
            			if (ele.name==e.name){
            				ele.name=state.tempArticleModel.title;
            				ret=true;
            				break;
            			}            		
            		}
            		if (ret){
            			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: e.seriesName,
						        data: state.baozhangDian
						      }
						    ]
						  });
            		}	    			
	    		}
	    		break;
	    		
	    		case '路线点':
	    		case '疏散路线':{
	    			//路线点
	    			ret=false;
	    			for (let i=0;i<state.luxianDian.length;i++){
            			let ele=state.luxianDian[i];            		
            			if (ele.name==e.name){
            				ele.name=state.tempArticleModel.title;
            				ret=true;
            			}            		
            		}
            		if (ret){
            			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '路线点',
						        data: state.luxianDian
						      }
						    ]
						  });
            		}
            		//路线
            		ret=false;
            		for (let i=0;i<state.shusanLuxianData.length;i++){
            			let ele=state.shusanLuxianData[i];            		
            			if (ele.name==e.name){
            				ele.name=state.tempArticleModel.title;
            				ret=true;
            			}            		
            		}
            		if (ret){
            			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '疏散路线',
						        data: state.shusanLuxianData
						      }
						    ]
						  });
            		}
	    		}
	    		
	    		break;
	    		
	    		case '疏散地域点':
	    		case '疏散地域':{
	    			//路线点
	    			ret=false;
	    			for (let i=0;i<state.shusandiyuDian.length;i++){
            			let ele=state.shusandiyuDian[i];            		
            			if (ele.name==e.name){
            				ele.name=state.tempArticleModel.title;
            				ret=true;
            			}            		
            		}
            		if (ret){
            			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '疏散地域点',
						        data: state.shusandiyuDian
						      }
						    ]
						  });
            		}
            		//路线
            		ret=false;
            		for (let i=0;i<state.shusanDiyuData.length;i++){
            			let ele=state.shusanDiyuData[i];            		
            			if (ele.name==e.name){
            				ele.name=state.tempArticleModel.title;
            				ret=true;
            			}            		
            		}
            		if (ret){
            			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '疏散地域',
						        data: state.shusanDiyuData
						      }
						    ]
						  });
            		}
	    		}
	    		break;
	    		
	    		case '隐蔽地域点':
	    		case '隐蔽地域':{
	    			//路线点
	    			ret=false;
	    			for (let i=0;i<state.yinbidiyuDian.length;i++){
            			let ele=state.yinbidiyuDian[i];            		
            			if (ele.name==e.name){
            				ele.name=state.tempArticleModel.title;
            				ret=true;
            			}            		
            		}
            		if (ret){
            			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '隐蔽地域点',
						        data: state.yinbidiyuDian
						      }
						    ]
						  });
            		}
            		//路线
            		ret=false;
            		for (let i=0;i<state.yinbiDiyuData.length;i++){
            			let ele=state.yinbiDiyuData[i];            		
            			if (ele.name==e.name){
            				ele.name=state.tempArticleModel.title;
            				ret=true;
            			}            		
            		}
            		if (ret){
            			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '隐蔽地域',
						        data: state.yinbiDiyuData
						      }
						    ]
						  });
            		}
	    		}
	    		break;
	    	}	    	
        };

		const handleDelete = async()=>{
            if (state.dialogStatus == 'create'){
            	state.dialogFormVisible=false;
            }
			else{
				let e=state.uptDelContext;
				let ret=false;
				await deleteArticleByName(e.name,ArticleType.SSYS).then(()=>{
			        ElMessage.success({
			          message: '删除成功',
			          type: 'success',
			          duration: 2000
			        })
			        ret=true;
			        }).catch(err => {
			      	ElMessage.warning('删除失败')
			     });

			    state.dialogFormVisible=false;
			    if (!ret) return;
			    
			    let i;
			    let delDian=[];
				switch(e.seriesName){
	    		case '集结点':{
	    			for (i=0;i<state.jijieDian.length;i++){
            			let ele=state.jijieDian[i];            		
            			if (ele.name==e.name){
            				break;
            			}            		
            		}
            		if (i!=state.jijieDian.length){
            			state.jijieDian.splice(i,1);
            			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: e.seriesName,
						        data: state.jijieDian
						      }
						    ]
						  });
            		}
	    		}
	    		break;
	    		
	    		case '警报点':{
	    			for (i=0;i<state.baozhangDian.length;i++){
            			let ele=state.baozhangDian[i];            		
            			if (ele.name==e.name){
            				break;
            			}            		
            		}
            		if (i!=state.baozhangDian.length){
            			state.baozhangDian.splice(i,1);
            			state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: e.seriesName,
						        data: state.baozhangDian
						      }
						    ]
						  });
            		}
	    		}
	    		break;
	    		
	    		case '路线点':
	    		case '疏散路线':{
					//路线点
					delDian=[];
					for (i=0;i<state.luxianDian.length;i++){
						let ele=state.luxianDian[i];
						if (ele.name==e.name){
							delDian.push(i);
						}
					}
					let j=0;
					delDian.forEach((ele)=>{							
						state.luxianDian.splice(ele-j,1);
						j++;
					});
					if (j){
						state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '路线点',
						        data: state.luxianDian
						      }
						    ]
						  });
					}
				//路线
					delDian=[];
					for (i=0;i<state.shusanLuxianData.length;i++){
						let ele=state.shusanLuxianData[i];
						if (ele.name==e.name){
							delDian.push(i);
							break;
						}
					}
					let k=0;
					delDian.forEach((ele)=>{							
						state.shusanLuxianData.splice(ele-k,1);
						k++;
					});
					if (k){
						state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: state.pageType,
						        data: state.shusanLuxianData
						      }
						    ]
						  });
					}
				}
	    		break;
	    		
	    		case '疏散地域点':
	    		case '疏散地域':{
					//地域点
					delDian=[];
					for (i=0;i<state.shusandiyuDian.length;i++){
						let ele=state.shusandiyuDian[i];
						if (ele.name==e.name){
							delDian.push(i);
						}
					}
					let j=0;
					delDian.forEach((ele)=>{							
						state.shusandiyuDian.splice(ele-j,1);
						j++;
					});
					if (j){
						state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '疏散地域点',
						        data: state.shusandiyuDian
						      }
						    ]
						  });
					}
				//地域
					delDian=[];
					for (i=0;i<state.shusanDiyuData.length;i++){
						let ele=state.shusanDiyuData[i];
						if (ele.name==e.name){
							delDian.push(i);
							break;
						}
					}
					let k=0;
					delDian.forEach((ele)=>{							
						state.shusanDiyuData.splice(ele-k,1);
						k++;
					});
					if (k){
						state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: state.pageType,
						        data: state.shusanDiyuData
						      }
						    ]
						  });
					}
				}
	    		break;
	    		
	    		case '隐蔽地域点':
	    		case '隐蔽地域':{
				//地域点
					delDian=[];
					for (i=0;i<state.yinbidiyuDian.length;i++){
						let ele=state.yinbidiyuDian[i];
						if (ele.name==e.name){
							delDian.push(i);
						}
					}
					let j=0;
					delDian.forEach((ele)=>{							
						state.yinbidiyuDian.splice(ele-j,1);
						j++;
					});
					if (j){
						state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '隐蔽地域点',
						        data: state.yinbidiyuDian
						      }
						    ]
						  });
					}
				//地域
					delDian=[];
					for (i=0;i<state.yinbiDiyuData.length;i++){
						let ele=state.yinbiDiyuData[i];
						if (ele.name==e.name){
							delDian.push(i);
							break;
						}
					}
					let k=0;
					delDian.forEach((ele)=>{							
						state.yinbiDiyuData.splice(ele-k,1);
						k++;
					});
					if (k){
						state.myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: state.pageType,
						        data: state.yinbiDiyuData
						      }
						    ]
						  });
					}
				}
	    		break;
	    	}	    	
			}
        };
		
		// 设置主内容的高度
		const initTagViewHeight = computed(() => {
			let { isTagsview } = store.state.themeConfig.themeConfig;
			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
			if (isTagsViewCurrenFull) {
				return `30px`;
			} else {
				if (isTagsview) return `114px`;
				else return `80px`;
			}
		});
		// echartsMap 将坐标信息和对应物理量的值合在一起
		const convertData = (data) => {
			let res = [];
			for (let i = 0; i < data.length; i++) {
				let geoCoord = state.echartsMapData[data[i].name];
				if (geoCoord) {
					res.push({
						name: data[i].name,
						value: geoCoord.concat(data[i].value),
					});
				}
			}
			return res;
		};
		
		// 初始化 echartsMap
		const initEchartsMap = () => {
			const myChart = echarts.init(document.getElementById('echartsMap'),'light');
			state.myChart=myChart;
			
			const option = {
				tooltip: {
					trigger: 'item',
				},
				color: ['#FF0000', '#ea7ccc'],
				bmap: {
					center: [window['gLongitudeVal'], window['gLatitudeVal']],
					zoom: 19,
					roam: true,
					mapStyle: {},
				},
				series: [
					{
						name: '集结点',
						type: 'scatter',
						coordinateSystem: 'bmap',						
						data:state.jijieDian,						
						symbol: "image://static/images/jijie.png",						
						symbolSize:40,
						encode: {
							value: 2,
						},
						label: {
							formatter: '{b}',
							position: 'right',
							show: true,
							color:'#ff0000',
							fontSize:14,
						},					
					},
					{
						name: '警报点',
						type: 'scatter',
						coordinateSystem: 'bmap',						
						data:state.baozhangDian,						
						symbol: "image://static/images/baozhang.png",						
						symbolSize:40,						
						encode: {
							value: 2,
						},
						
						label: {
							formatter: '{b}',
							position: 'right',
							show: true,
							color:'#ff0000',
							fontSize:14,
						},					
					},
					{
						name: '路线点',
						type: 'scatter',
						coordinateSystem: 'bmap',						
						data:state.luxianDian,			
						symbol: "image://static/images/end_e68ad9a.png",						
						symbolSize:10,						
						encode: {
							value: 2,
						},						
						label: {
							formatter: '{b}',
							//position: 'right',
							position: 'top',
							show: false,
							color:'#ff0000',
							fontSize:14,
						},						
					},					
					{
						name: '疏散地域点',
						type: 'scatter',
						coordinateSystem: 'bmap',						
						data:state.shusandiyuDian,			
						symbol: "image://static/images/shusan.png",						
						symbolSize:30,						
						encode: {
							value: 2,
						},						
						label: {
							formatter: '{b}',
							position: 'right',
							show: true,
							color:'#ff0000',
							fontSize:14,
						},					
					},
					{
						name: '隐蔽地域点',
						type: 'scatter',
						coordinateSystem: 'bmap',												
						data:state.yinbidiyuDian,			
						symbol: "image://static/images/yinbi.png",						
						symbolSize:30,						
						encode: {
							value: 2,
						},
						
						label: {
							formatter: '{b}',
							position: 'right',
							show: true,
							color:'#ff0000',
							fontSize:14,
						},					
					},
					{
						name: '疏散路线',
						type: 'lines',
						coordinateSystem: 'bmap',
						polyline:true,
						// 统一的样式设置	
						lineStyle: {
				            color: '#00ff00',					            
				            opacity: 0.8,
				            width: 10,
				        },
						data:state.shusanLuxianData,					
					},
					{
						name: '疏散地域',
						type: 'lines',
						coordinateSystem: 'bmap',
						polyline:true,
						// 统一的样式设置	
						lineStyle: {
				            color: '#0000ff',					            
				            opacity: 0.6,
				            width: 15,
				        },
						data:state.shusanDiyuData,					
					},
					{
						name: '隐蔽地域',
						type: 'lines',
						coordinateSystem: 'bmap',
						polyline:true,
						// 统一的样式设置	
						lineStyle: {
				            color: '#ff0000',					            
				            opacity: 0.6,
				            width: 15,
				        },
						data:state.yinbiDiyuData,					
					},
				],
			};
			myChart.setOption(option,true);
			window.addEventListener('resize', () => {
				myChart.resize();
			});
			
			//lhc added 
			//init 
			state.curSearchPoint=new BMap.Point;
  			state.curSearchMarker=new BMap.Marker;
  			state.startGhLuxianPoint=new BMap.Point;
  			state.endGhLuxianPoint=new BMap.Point;
		    // 从echarts对象中获取bmap对象
		    const bmap = state.bmap = myChart.getModel().getComponent('bmap').getBMap();			
		    bmap.setMinZoom(10);		    
		    bmap.setMaxZoom(19);

		    bmap.addEventListener('click', function(e){
		    	if (state.showToolsBox){
		    		if (state.isMarkActive){		    			
		    			state.isMarkActive=false;
		    			if (state.pageType=='集结点'){
			    			state.jijieDian.push({
				    			name:'',
				    			value:[e.point.lng,e.point.lat,undefined],
			    			});
			    			myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: state.pageType,
							        data: state.jijieDian
							      }
							    ]
							  });
						
			    			//显示对话框
			    			editDialogShowByLoc(e.offsetX,e.offsetY);
			    			resetTempArticleModel();
		    			}
		    			else if (state.pageType=='警报点'){
			    			state.baozhangDian.push({
				    			name:'',
				    			value:[e.point.lng,e.point.lat,undefined],
			    			});
			    			myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: state.pageType,
							        data: state.baozhangDian
							      }
							    ]
							  });
						
			    			//显示对话框
			    			editDialogShowByLoc(e.offsetX,e.offsetY);
			    			resetTempArticleModel();
		    			}
		    			else{
		    				ElMessage.error('标注仅用于集结点和警报点,路线/区域请点击手绘');
		    			}
		    		}
		    		else{
		    			state.showToolsBox=false;
		    		}
		    	}
		    	else if (state.showLuxian){
		    		let subitem={
		    			address:'['+e.point.lng+','+e.point.lat+']',
		    			longitude:e.point.lng,
		    			latitude:e.point.lat,
		    		};
		    		if (state.isStartLuxianFocus){
		    			setQizhongdianInput(subitem);
		    		}
		    		else if (state.isEndLuxianFocus){
		    			setQizhongdianInput(subitem);
		    		}		    		
		    	}
	    		else if (state.isShouhuiActive){
	    			if (state.pageType=='疏散路线'){
	    				state.currentLxDian.push({
			    			name:dftSeriesLinesData.name,
			    			value:[e.point.lng,e.point.lat],
			    		});
			    		if (state.currentLxDian.length==1){
		    				state.luxianDian.push({
				    			name:dftSeriesLinesData.name,
				    			value:[e.point.lng,e.point.lat,undefined],
				    			label:{show:true},
				    		});
			    		}
			    		else{
			    			state.luxianDian.push({
				    			name:dftSeriesLinesData.name,
				    			value:[e.point.lng,e.point.lat,undefined],
			    			});
			    		}
		    			myChart.setOption({  
						    series: [
						      {
						        // 根据名字对应到相应的系列
						        name: '路线点',
						        data: state.luxianDian
						      }
						    ]
						  });
						  
						if (state.currentLxDian.length>1){
							if (state.currentLxDian.length==2){
								let currentLuxianData=cloneDeep(dftSeriesLinesData);								
								state.currentLxDian.forEach((ele)=>{
									currentLuxianData.coords.push(ele.value);
								});
								state.shusanLuxianData.push(currentLuxianData);
							}
							else{
								state.shusanLuxianData.forEach((ele)=>{
									if (ele.name==dftSeriesLinesData.name){
										ele.coords.push([e.point.lng,e.point.lat]);
									}									
								});								
							}
							myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: '疏散路线',
							        data: state.shusanLuxianData
							      }
							    ]
							  });
						}
	    			}
	    			else{
		    				ElMessage.error('点击仅用于疏散路线,区域请按住鼠标左键拖动');
		    		}
	    		}
			});

	    	// bmap.addEventListener('dblclick', function(e){
	    	bmap.addEventListener('rightclick', function(e){
				if (state.isShouhuiActive)
		    	{		    		
		    		state.isShouhuiActive=false;
		    		state.currentLxDian=[];
		    		/*
		    		nextTick(() => {	    							
	          			state.bmap.enableDoubleClickZoom();
	        		});
	        		*/
	        		//显示对话框
	    			editDialogShowByLoc(e.offsetX,e.offsetY);
	    			resetTempArticleModel();
		    	}
	    	});

	    	bmap.addEventListener('mousemove', function(e){
	    		if (state.isMouseDown){
					
					if (state.isShouhuiActive){ 
		    			if (state.pageType=='疏散地域')	{	    		
		    				if (state.currentSsdyDian.length==0){		    					
		    					state.currentSsdyDian.push({
					    			name:dftSeriesLinesData.name,
					    			value:[e.point.lng,e.point.lat],
					    		});
			    				state.shusandiyuDian.push({
					    			name:dftSeriesLinesData.name,
					    			value:[e.point.lng,e.point.lat],
					    		});		    			
				    			myChart.setOption({  
								    series: [
								      {
								        // 根据名字对应到相应的系列
								        name: '疏散地域点',
								        data: state.shusandiyuDian
								      }
								    ]
								  });	    					
		    				}
		    				else {
		    					let startDian=state.currentSsdyDian[0];
		    					
		    					if (state.currentSsdyDian.length==1){
		    						state.currentSsdyDian.push({
						    			name:dftSeriesLinesData.name,
						    			value:[e.point.lng,e.point.lat],
					    			});			    					
			    					let currentSsdyData=cloneDeep(dftSeriesLinesData);
			    					
									currentSsdyData.coords.push(startDian.value,
									[e.point.lng,startDian.value[1]],
									[e.point.lng,e.point.lat],
									[startDian.value[0],e.point.lat],
									startDian.value);
									
									state.shusanDiyuData.push(currentSsdyData);
			    				}
								else{
									state.shusanDiyuData.forEach((ele)=>{
										if (ele.name==dftSeriesLinesData.name){
											ele.coords.splice(1,4,
											[e.point.lng,startDian.value[1]],
											[e.point.lng,e.point.lat],
											[startDian.value[0],e.point.lat],
											startDian.value);
										}
									});
								}
								myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: '疏散地域',
							        data: state.shusanDiyuData
							      }
							    ]
							  });
							}
		    			}
		    			else if (state.pageType=='隐蔽地域')	{	    		
		    				if (state.currentYbdyDian.length==0){		    					
		    					state.currentYbdyDian.push({
					    			name:dftSeriesLinesData.name,
					    			value:[e.point.lng,e.point.lat],
					    		});
			    				state.yinbidiyuDian.push({
					    			name:dftSeriesLinesData.name,
					    			value:[e.point.lng,e.point.lat],
					    		});		    			
				    			myChart.setOption({  
								    series: [
								      {
								        // 根据名字对应到相应的系列
								        name: '隐蔽地域点',
								        data: state.yinbidiyuDian
								      }
								    ]
								  });	    					
		    				}
		    				else {
		    					let startDian=state.currentYbdyDian[0];
		    					
		    					if (state.currentYbdyDian.length==1){
		    						state.currentYbdyDian.push({
						    			name:dftSeriesLinesData.name,
						    			value:[e.point.lng,e.point.lat],
					    			});			    					
			    					let currentYbdyData=cloneDeep(dftSeriesLinesData);
			    					
									currentYbdyData.coords.push(startDian.value,
									[e.point.lng,startDian.value[1]],
									[e.point.lng,e.point.lat],
									[startDian.value[0],e.point.lat],
									startDian.value);
									
									state.yinbiDiyuData.push(currentYbdyData);
			    				}
								else{
									state.yinbiDiyuData.forEach((ele)=>{
										if (ele.name==dftSeriesLinesData.name){
											ele.coords.splice(1,4,
											[e.point.lng,startDian.value[1]],
											[e.point.lng,e.point.lat],
											[startDian.value[0],e.point.lat],
											startDian.value);
										}
									});
								}
								myChart.setOption({  
							    series: [
							      {
							        // 根据名字对应到相应的系列
							        name: '隐蔽地域',
							        data: state.yinbiDiyuData
							      }
							    ]
							  });
							}
		    			}
		    			else{
		    				ElMessage.error('拖动仅用于绘制地域');
		    		}
	    			}
				}				
	    	});

	    	myChart.getZr().on('mousedown',(e)=>{
	    		
	    		if (state.isShouhuiActive){	    			
	    			if ((state.pageType=='疏散地域')||(state.pageType=='隐蔽地域'))	{	    		
	    				state.bmap.disableDragging();	    				
	    				state.isMouseDown=true;
	    			}
	    		}
	    	});
	    	myChart.getZr().on('mouseup',(e)=>{
	    		
	    		if (state.isShouhuiActive){
	    			if ((state.pageType=='疏散地域')||(state.pageType=='隐蔽地域')){	
	    				state.isShouhuiActive=false;
	    				state.bmap.enableDragging();
	    				state.isMouseDown=false;
	    				state.currentSsdyDian=[];
	    				state.currentYbdyDian=[];
	    				//显示对话框
		    			editDialogShowByLoc(e.offsetX,e.offsetY);
		    			resetTempArticleModel();
	    			}
	    		}
	    	});

	    	myChart.on('click',(e)=>{
	    		for (let i=0;i<state.getTblData.data.length;i++){
	    			let ele=state.getTblData.data[i];
	    			if (ele.title==e.name){
	    				state.tempArticleModel=cloneDeep(ele);
	    				state.dialogStatus='update';
	    				editDialogShowByLoc(e.event.offsetX,e.event.offsetY);
	    				state.uptDelContext=e;
	    				break;
	    			}  		
	    		}
	    	});

		    //test start
		    
		    //test end
		};
		// 页面加载时
		onMounted(async()=>{
			await initEchartsMap();
			await loadTypeName();
		});
		onUnmounted(() => {
	      state.myChart.dispose();
	    });
		return {
			initTagViewHeight,
			...toRefs(state),
			changeRouteIndex,
			clickSubTools,
			searchAddr,
			clickGhLuxian,			
			setSearchInput,
			setQizhongdianInput,
			startGhLuxianFocus,
			endGhLuxianFocus,
			searchBoxFocus,
			closeSearchContent,
			t,
			handleDelete,
			createData,        
        	updateData,
        	setSelectItem,
		};
	},
};
</script>

